<!doctype html>
<html>

<head>
	<title>忘记密码</title>
</head>

<body>
	<div class="resetpassword">
		<!-- 顶部 -->
		<div class="logintop">
			<div class="container flex space-between">
				<div class="top_left">
					<img src="../../images/logo.png" alt="">
					<span class="span1">净水器</span>
					<span class="span2">惠聚优质净水器/直饮水</span>
				</div>
				<div class="top_right flex y-center">
					<img src="../../images/home.png" alt="">
					<span class="span3">
						<a href="./index,html">进入网址首页</a>
					</span>
				</div>
			</div>
		</div>

		<div class="contentbox">
			<!-- 第一步 -->
			<div id="step1" class="container innerbox step" style="background-color: #fff;">
				<div class="title">重置密码</div>
				<div class="stepbox">
					<div class="stepbox_t flex y-center">
						<div class="circle circlecolor">1</div>
						<div class="line linecolor"></div>
						<div class="line"></div>
						<div class="circle">2</div>
						<div class="line"></div>
						<div class="line"></div>
						<div class="circle">3</div>
						<div class="line"></div>
						<div class="line"></div>
						<div class="circle">4</div>
					</div>
					<div class="stepbox_b flex space-between">
						<div class="textcolor">填写账号名</div>
						<div>验证身份</div>
						<div>设置密码</div>
						<div>完成</div>
					</div>
				</div>
				<div class="usernamebox flex">
					<div class="usernamebox_l">
						<div>用户名称:</div>
						<div>验证码:</div>
					</div>
					<div class="usernamebox_r">
						<div>
							<input type="text" placeholder="手机号码/用户名称" name="" id="">
						</div>
						<div>
							<input type="text" placeholder="输入图形验证码" name="" id="">
						</div>
						<div class="flex space-between code">
							<div style="width:151px;height:50px;background-color: #ccc;"></div>
							<div>看不清？<span class="change">换一张</span></div>
						</div>
						<div class="buts">
							<div class="stepbut flex x-center y-center next">下一步</div>
						</div>
					</div>
				</div>
			
			</div>
			<!-- 第二步 -->
			<div id="step2" class="container innerbox step" style="background-color: #fff;">
				<div class="title">重置密码</div>
				<div class="stepbox">
					<div class="stepbox_t flex y-center">
						<div class="circle" style="border-color: #069c7e">
							<img src="../../images/dagou.png" alt="" style="width:30px;height: 22px;">
						</div>
						<div class="line linecolor"></div>
						<div class="line linecolor"></div>
						<div class="circle circlecolor">2</div>
						<div class="line linecolor"></div>
						<div class="line"></div>
						<div class="circle">3</div>
						<div class="line"></div>
						<div class="line"></div>
						<div class="circle">4</div>
					</div>
					<div class="stepbox_b flex space-between">
						<div class="textcolor">填写账号名</div>
						<div class="textcolor">验证身份</div>
						<div>设置密码</div>
						<div>完成</div>
					</div>
				</div>
				<div class="usernamebox flex">
					<div class="usernamebox_l">
						<div>用户名称:</div>
						<div>手机号码:</div>
						<div>验证码:</div>
					</div>
					<div class="usernamebox_r">
						<div>
							<input type="text" placeholder="小美花" name="" id="">
						</div>
						<div>
							<input type="text" placeholder="18654178061" name="" id="">
							<div class="tips">若该手机号已无法使用请联系客服</div>
						</div>
						<div>
							<input type="text" placeholder="短信验证码" name="" id="">
							<div class="sendcode">发送验证码</div>
						</div>
						<div class="buts">
							<div class="stepbut flex x-center y-center next">下一步</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第三步 -->
			<div id="step3" class="container innerbox step" style="background-color: #fff;">
				<div class="title">重置密码</div>
				<div class="stepbox">
					<div class="stepbox_t flex y-center">
						<div class="circle" style="border-color: #069c7e">
							<img src="../../images/dagou.png" alt="" style="width:30px;height: 22px;">
						</div>
						<div class="line linecolor"></div>
						<div class="line linecolor"></div>
						<div class="circle" style="border-color: #069c7e">
							<img src="../../images/dagou.png" alt="" style="width:30px;height: 22px;">
						</div>
						<div class="line linecolor"></div>
						<div class="line linecolor"></div>
						<div class="circle circlecolor">3</div>
						<div class="line linecolor"></div>
						<div class="line"></div>
						<div class="circle">4</div>
					</div>
					<div class="stepbox_b flex space-between">
						<div class="textcolor">填写账号名</div>
						<div class="textcolor">验证身份</div>
						<div class="textcolor">设置密码</div>
						<div>完成</div>
					</div>
				</div>
				<div class="usernamebox flex">
					<div class="usernamebox_l">
						<div>新的密码:</div>
						<div>重复密码:</div>
					</div>
					<div class="usernamebox_r">
						<div>
							<input type="password" placeholder="设置6至20位登录密码" name="" id="">
						</div>
						<div>
							<input type="password" placeholder="请再次输入登录密码" name="" id="">
						</div>
						<div class="buts">
							<div class="stepbut flex x-center y-center next">下一步</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第四步 -->
			<div id="step4" class="container innerbox step" style="background-color: #fff;">
				<img src="../../images/finish.png" alt="">
				<div class="text1">密码重置成功</div>
				<div class="text2">下次请使用新密码进行登录</div>
				<div class="buts">
					<div class="stepbut flex x-center y-center next">
						<a href="./index.html">进入首页</a>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<div class="loginfooter">
			<div class="container flex x-center y-center list">
				<div>
					<a href="#">关于我们</a>
				</div>
				<div>
					<a href="#">帮助中心</a>
				</div>
				<div>
					<a href="#">售后服务</a>
				</div>
				<div>
					<a href="#">配送与验收</a>
				</div>
				<div>
					<a href="#">商务合作</a>
				</div>
				<div>
					<a href="#">企业采购</a>
				</div>
				<div>
					<a href="#">开放平台</a>
				</div>
				<div>
					<a href="#">搜索推荐 </a>
				</div>
				<div>
					<a href="#">友情链接</a>
				</div>
			</div>
			<div class="container flex x-center list">CopyRight @ 优品汇 2015 - 2017</div>
		</div>
	</div>
</body>

</html>